<template>
	<view>
		<view class="list flex align-center">
			<text>售后类型：申请换货</text>
		</view>
		<view class="margin-top list flex align-center">
			<text>退款金额</text>
			<input placeholder="请输入退款金额（最多可退199.5元）" />
		</view>
		<picker @change="PickerChange" :value="index" :range="picker">
			<view class=" list flex align-center justify-between">
				<text>{{index>-1?picker[index]:'退款原因'}}</text>
				<view class="lg text-gray cuIcon-right"></view>
			</view>
		</picker>
		<view class="textarea margin-top">
			<textarea maxlength="-1" placeholder="请输入换货说明..."></textarea>
		</view>
		<view class="upload">
			<text class="upload-title">上传凭证</text>
			<view class="upload-con flex align-center justify-between">
				<view class="upload-item">
					<view class="bg-img" @tap="ViewImage" v-if="imgList[0]" :data-url="imgList[0]">
					 <image class="solidss-img" :src="imgList[0]" mode="aspectFill"></image>
						<view class="close cu-tag bg-red" @tap.stop="DelImg" :data-index="0">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solidss flex flex-direction align-center justify-center" @tap="ChooseImage">
						<text class="lg text-gray cuIcon-add"></text>
						<text>添加图片</text>
					</view>
				</view>
				<view class="upload-item">
					<view class="bg-img"  @tap="ViewImage" v-if="imgList[1]" :data-url="imgList[1]">
					 <image class="solidss-img" :src="imgList[1]" mode="aspectFill"></image>
						<view class="close cu-tag bg-red" @tap.stop="DelImg" :data-index="1">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solidss flex flex-direction align-center justify-center" @tap="ChooseImage">
						<text class="lg text-gray cuIcon-add"></text>
						<text>添加图片</text>
					</view>
				</view>
				<view class="upload-item">
					<view class="bg-img" v-if="imgList[2]" @tap="ViewImage" :data-url="imgList[2]">
					 <image class="solidss-img" :src="imgList[2]" mode="aspectFill"></image>
						<view class="close cu-tag bg-red" @tap.stop="DelImg" :data-index="2">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solidss flex flex-direction align-center justify-center" @tap="ChooseImage">
						<text class="lg text-gray cuIcon-add"></text>
						<text>添加图片</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom flex align-center justify-center">
			<view>提交</view>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				index: -1,
				picker: ['原因1', '原因2', '原因3'],
				imgList: [],
			}
		},
		methods: {
			PickerChange(e) {
				this.index = e.detail.value
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			DelImg(e) {
				this.imgList.splice(e.currentTarget.dataset.index, 1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bottom{
		width: 100%;
			height: 100upx;
			background-color: #ffffff;
			border: solid 1upx #dddddd;
			position: fixed;
			bottom: 0;
	}
	.bottom> view{
		width: 361upx;
			height: 69upx;
			background-color: $btn-bground;
			border-radius: 34upx;
			border: solid 1upx $btn-bground;
			text-align: center;
			line-height: 69upx;
			color: #fff;
			font-size: 28upx;
	}
	.upload-item .close{
		position: absolute;
		top: 0;
		right: 0;
	}
	.upload-item{
		position: relative;
	}
	.upload-item image{
		background-color: #fff;
		position: absolute;
		top: 0;
	}
	.solidss-img{
		width: 218upx;
		height: 163upx;
	}
	.upload-con{
		margin-top: 20upx;
	}
	.upload{
		padding: 20upx;
		box-sizing: border-box;
	}
	.upload-title{
			font-size: 26upx;
			color: #666666;
	}
	.solidss>text:nth-child(1){
		font-size: 70upx;
		color: #cccccc;
		line-height: 50upx;
	}
	.solidss>text:nth-child(2){
			font-size: 24upx;
			color: #cccccc;
			margin-top: 14upx;
	}
	.solidss{
		width: 218upx;
			height: 163upx;
			background-color: #ffffff;
			border: dashed 1upx #cccccc;
	}
	.textarea{
		padding: 20upx;
		box-sizing: border-box;
		background-color: #fff;
		height: 210upx;
	}
	.textarea textarea{
		font-size: 26upx;
		height: 170upx;
		width: 100%;
	}
	.list input{
		margin-left: 48upx;
		width: 500upx;
		font-size: 28upx;
	}
	.list text:nth-child(1){
		font-size: 28upx;
		color: #000000;
	}
	.list{
		height: 86upx;
		background-color: #ffffff;
		padding: 0 20upx;
		box-sizing: border-box;
		border-bottom: 1upx solid #ddd;
	}
</style>
